<template>
  <div class="container">
    <!-- 轮播图区域 -->
    <div class="carousel">
      <div class="carousel-box">
        <div>让灰色链接在网页预览下一览无余</div>
        <div>支持多设备、多系统、多款浏览器切换预览</div>
        <span @click="startCheck">开始使用</span>
      </div>
    </div>

    <!-- 应用场景区域 -->
    <div class="nav use-area">
      <div class="use-area-box">
        <!-- 应用场景区域上部分 -->
        <div class="use-area-box-top">
          <div class="use-area-nav">
            <a-tabs v-model:activeKey="state.activeKey">
              <a-tab-pane key="1">
                <template #tab>
              <span>
                <img src="../../assets/img/publicity/product_duce/icon_zhuizong_chanpin.png" alt="追踪还原">
                <span>追踪还原</span>
              </span>
                </template>
                <div class="use-area-tab">
                  <div class="use-area-box-buttom">
                    <div ref="boxLeft" class="use-area-boxLeft"><img class="boxLeft-img" src="../../assets/img/publicity/product_duce/pic_first_zhuizong.svg" alt="效率">
                    </div>
                    <div ref="boxRight"  class="use-area-boxRight">
                      <div class="use-area-box-items" >
                      <span class="items2">
                        一查便知谁在为灰色链接提供服务
                      </span>
                        <span class="items3">
                        一键检查，侦查追踪层层提供链接的服务者
                      </span>
                        <span class="items4">
                        <span class="title">立即使用>>></span>
                        <span class="qrcode-wrapper-box">
                          <span><img src="../../assets/img/publicity/product_duce/code.png" alt="二维码"></span>
                          <span class="color">微信扫一扫立即体验</span>
                          <div class="qrcode-wrapper">
                            <qrcode-vue :value="state.wechatUrl" :size="158" @click="getWechatUrl"/>
                          </div>
                        </span>
                      </span>
                      </div>
                    </div>
                  </div>
                  <div ref="tops" class="use-area-box-buttom use-area-box2">
                    <div class="use-area-boxRight">
                      <div class="use-area-box-items">
                      <span class="items2">
                        创新与实用兼具
                      </span>
                        <span class="items3">
                        基于思维导图结构展示，检查链接首创，更具逻辑性
                      </span>
                        <span class="items4">
                        <span class="title">立即使用>>></span>
                        <span class="qrcode-wrapper-box">
                          <span><img src="../../assets/img/publicity/product_duce/code.png" alt="二维码"></span>
                          <span class="color">微信扫一扫立即体验</span>
                          <div class="qrcode-wrapper">
                             <qrcode-vue :value="state.wechatUrl" :size="158" @click="getWechatUrl"/>
                          </div>
                        </span>
                      </span>
                      </div>
                    </div>
                    <div class="use-area-boxLeft application-img"><img class="boxLeft-img" src="../../assets/img/publicity/product_duce/pic_second_zhuizong.svg" alt="效率"></div>
                  </div>
                  <div ref="xia" class="use-area-box-buttom use-area-box3">
                    <div class="use-area-boxLeft"><img class="boxLeft-img" src="../../assets/img/publicity/product_duce/pic_last_zhuizong.svg" alt="效率"></div>
                    <div class="use-area-boxRight">
                      <div class="use-area-box-items">
                      <span class="items2">
                        维系基于链接的互联网生态平衡
                      </span>
                        <span class="items3">
                        揭露灰色链接的灰产现行，维系链接生态平衡
                      </span>
                        <span class="items4">
                        <span class="title">立即使用>>></span>
                        <span class="qrcode-wrapper-box">
                          <span><img src="../../assets/img/publicity/product_duce/code.png" alt="二维码"></span>
                          <span class="color">微信扫一扫立即体验</span>
                          <div class="qrcode-wrapper">
                             <qrcode-vue :value="state.wechatUrl" :size="158" @click="getWechatUrl"/>
                          </div>
                        </span>
                      </span>
                      </div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2">
                <template #tab>
              <span>
                <img src="../../assets/img/publicity/product_duce/icon_yulan_chanpin.png" alt="网页预览">
                <span>网页预览</span>
              </span>
                </template>

                <div class="use-area-tab">
                  <div  class="use-area-box-buttom">
                    <div class="use-area-boxLeft"><img class="boxLeft-img" src="../../assets/img/publicity/product_duce/pic_first_yulan.svg"
                                                       alt="效率"></div>
                    <div class="use-area-boxRight">
                      <div class="use-area-box-items">
                      <span class="items2">
                        多设备响应式可视化预览
                      </span>
                        <span class="items3">
                        一站式网页预览，轻松判别链接网页内容
                      </span>
                        <span class="items4">
                        <span class="title">立即使用>>></span>
                        <span class="qrcode-wrapper-box">
                          <span><img src="../../assets/img/publicity/product_duce/code.png" alt="二维码"></span>
                          <span class="color">微信扫一扫立即体验</span>
                          <div class="qrcode-wrapper">
                            <qrcode-vue :value="state.wechatUrl" :size="158" @click="getWechatUrl"/>
                          </div>
                        </span>
                      </span>
                      </div>
                    </div>
                  </div>
                  <div  class="use-area-box-buttom">
                    <div class="use-area-boxRight">
                      <div class="use-area-box-items">
                      <span class="items2">
                        专业预览灰色链接网页工具
                      </span>
                        <span class="items3">
                        满足多设备多系统同时呈现效果的精细化需求
                      </span>
                        <span class="items4">
                        <span class="title">立即使用>>></span>
                        <span class="qrcode-wrapper-box">
                          <span><img src="../../assets/img/publicity/product_duce/code.png" alt="二维码"></span>
                          <span class="color">微信扫一扫立即体验</span>
                          <div class="qrcode-wrapper">
                             <qrcode-vue :value="state.wechatUrl" :size="158" @click="getWechatUrl"/>
                          </div>
                        </span>
                      </span>
                      </div>
                    </div>
                    <div class="use-area-boxLeft application-img"><img class="boxLeft-img" src="../../assets/img/publicity/product_duce/pic_second_yulan.svg" alt="效率"></div>
                  </div>
                  <div  class="use-area-box-buttom">
                    <div class="use-area-boxLeft"><img class="boxLeft-img" src="../../assets/img/publicity/product_duce/pic_last_yulan.svg"
                                                       alt="效率"></div>
                    <div class="use-area-boxRight">
                      <div class="use-area-box-items">
                      <span class="items2">
                        检查链接颠覆传统网页预览
                      </span>
                        <span class="items3">
                        不止是预览，更是为想揭露灰产链接的群体提
                      </span>
                        <span class="items4">
                        <span class="title">立即使用>>></span>
                        <span class="qrcode-wrapper-box">
                          <span><img src="../../assets/img/publicity/product_duce/code.png" alt="二维码"></span>
                          <span class="color">微信扫一扫立即体验</span>
                          <div class="qrcode-wrapper">
                             <qrcode-vue :value="state.wechatUrl" :size="158" @click="getWechatUrl"/>
                          </div>
                        </span>
                      </span>
                      </div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <!-- 应用场景区域下部分 -->

      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
export default {
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: '检查链接,快速、高效、全面的检查灰色链接平台。'
      },
      {
        name: 'description',
        content: '一站式检查出灰色链接的全部信息，以思维导图形式追踪还原入口层、中间层、最终层的链接信息，让一切都清晰明了地展现在你面前。'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no'
      }
    ]
  }
}
</script>

<script setup>
import Footer from '@/components/publicity/footer'
import {onMounted, reactive, getCurrentInstance} from 'vue'
import {getWechat, getStatus,} from '@/axios'
// import { LoadingOutlined } from '@ant-design/icons-vue'
import {useRouter, useRoute} from 'vue-router'
import QrcodeVue from 'qrcode.vue'
import {useStore} from 'vuex'
const router = useRouter()
const route = useRoute()
const store = useStore()
const {proxy} = getCurrentInstance()

let state = reactive({
  activeKey: '1',
  testShow:false,
  testShow2:false,
  testShow3:false,
  wechatUrl:'',
  qrcodeIsVaild: true,
  gettingQrcode: false,
})


onMounted(()=>{

  window.onscroll = function () {
    let t = document.documentElement.scrollTop || document.body.scrollTop;
    // 动效代码开始
    if (t > (proxy.$refs.boxLeft.offsetTop - proxy.$refs.boxLeft.offsetHeight) - 680) {
      proxy.$refs.boxLeft.style.animation = "move4 .8s linear" //添加动画
      proxy.$refs.boxRight.style.animation = "move4 .8s linear" //添加动画
      if (t > (proxy.$refs.tops.offsetTop - proxy.$refs.tops.offsetHeight) - 680) {
        proxy.$refs.tops.style.animation = "move4 .8s linear" //添加动画
        if (t > (proxy.$refs.xia.offsetTop - proxy.$refs.xia.offsetHeight) - 680) {
          proxy.$refs.xia.style.animation = "move4 .8s linear" //添加动画
        }
      }
    }
  }
})


let qrcodeInterval = null
const getWechatUrl = async () => {
  state.gettingQrcode = true
  clearInterval(qrcodeInterval)
  const wechatRes = await getWechat()
  if (wechatRes.code === 1) {
    state.gettingQrcode = false
    state.qrcodeIsVaild = true
    let time = 60
    qrcodeInterval = setInterval(() => {
      if (time <= 1) {
        state.qrcodeIsVaild = false
        clearInterval(qrcodeInterval)
      } else {
        time--
        getStatus({token: wechatRes.token}).then(res => {
          if (res.code === 0) {
            clearInterval(qrcodeInterval)
            localStorage.setItem('userToken', res.data.token)
            state.showAccount = false
            store.dispatch('getUserInfo')
            proxy.$message.success(res.msg)
            setTimeout(()=>{
              router.push('/check')
            },300)
          }
        })
      }
    }, 1000)
    state.wechatUrl = wechatRes.url
  }
}
getWechatUrl()

const startCheck = ()=>{
  if(!store.state.isLogin) return proxy.$message.error('您未登录或已超时，请先登录后，再进行操作。')
  router.push('/check')
}

</script>

<style lang="less" scoped>
.container{
  padding-top: 180px;
}
@media screen and (max-width: 650px){
  .use-area-boxRight{
    padding:70px 0;
  }

  .carousel{
    padding:70px 0!important;
  }

  .carousel-box div:nth-child(1){
    font-size: 24px!important;
  }
  .carousel-box div:nth-child(2){
    font-size: 16px!important;
  }

  .carousel-box{
    padding: 30px 0!important;
  }

  .use-area-tab .use-area-box-buttom:nth-child(1){
    margin: 100px 0 180px 0!important;
  }

  .use-area-tab .use-area-box-buttom:nth-child(3){
    margin: 80px 0 80px 0!important;
  }
}
@media screen and (min-width: 1201px) and (max-width: 1550px) {
  .use-area-box-buttom .boxLeft-img{
    width:80% !important;
  }

  .use-area-boxRight{
    padding:0 !important;
  }

  .use-area-boxRight .items2{
    font-size: 24px !important;
  }

  .use-area-boxRight .items3{
    font-size: 16px !important;
  }

  .use-area-boxRight .items4{
    font-size: 15px !important;
  }
}



&:deep(.ant-tabs-nav-list) {
  width: 100%;
  display: flex;
  justify-content: space-around;

  .ant-tabs-tab {
    font-size: 16px;
    padding: 22px 0;
  }
}

.nav {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #FFFFFF;
}

/* 轮播图区域开始 */
.carousel {

  width: 100%;
  display: flex;
  justify-content: center;
  padding: 55px 0;
  background: url(../../assets/img/publicity/product_duce/bannner_gongnen_bg.png) 50% 100%;

}

.carousel-box {
  width: 65%;
  text-align: center;
  color: #fff;
  padding: 60px;
}

.carousel-box div:nth-child(1) {
  font-size: 32px;
  font-weight: 600;

}

.carousel-box div:nth-child(2) {
  font-size: 22px;
  font-weight: 500;

  margin: 18px 0;
}

.carousel-box span {
  height: 30px;
  border-radius: 4px;
  background-color: #ffffff;
  display: inline-block;
  align-self: flex-start;
  cursor:pointer;
  width: 100px;
  color: #483CFF;
  text-align: center;
  line-height: 30px;
  letter-spacing: 1px;
}


@media screen and (max-width: 1200px) {
  .carousel-box {
    width: 100%;

  }
}


/* 轮播图区域结束 */

/* 应用场景区域开始 */
.use-area {
  padding: 25px 0;
  background: -webkit-linear-gradient(#fff, #fff) no-repeat, #f3f5fa;
  background-size: 100% 129px;
}

.word_color {
  color: #393D49 !important;
}

.application-img {
  text-align: end;
}

.use-area-in {
  font-size: 30px !important;
}

.use-area-box {
  width: 65%;
  box-sizing: border-box;
}


//.use-area-box-top {
//  text-align: center;
//}

.use-area-box-top span:nth-child(1) {
  font-weight: 700;
  color: #161819;
}


.mark {
  vertical-align: super;
  font-weight: 600;
  font-size: 15px;
}


.use-area-box-buttom {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around !important;
  margin: 280px 0;
}

.use-area-box-buttom img {
  width: 70%;
}

.use-area-boxRight {
  width: 39%;
  //animation:move4 .8s linear;
}

.use-area-boxLeft {
  width: 45%;
  //animation:move4 .8s linear;
}

.use-area-box-buttom div:nth-child(2) img {
  //height: 100%;
}

.use-area-box-buttom .word6 {
  display: block;
  font-size: 15px;

  font-weight: 600;
  color: #484A4D;
}

.use-area-box-buttom .txt4 {
  display: block;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: rgba(120, 121, 127, 1);
  margin-top: 25px;
}

.use-area-boxRight {
  //padding: 75px 0;
  box-sizing: border-box;
}


.use-area-box-items {
  padding-top: 0px !important;
}

.use-area-boxRight .items2 {
  font-size: 32px;
  font-weight: 600;
  margin: 0px 0 15px 0;
  display: inline-block;
}

.use-area-boxRight .items3 {
  font-size: 22px;
  display: inline-block;
  color: #b7b8be;
}

.use-area-box-buttom .use-area-box-items {
  width: 100%;
}

.use-area-box-buttom .use-area-box-items span {
  width: 100%;

}

.use-area-boxRight .items4 {
  display: inline-block;
  font-size: 16px;
  margin-top: 30px;
}

.use-area-boxRight img {
  width: 16px;
  display: inline-block;
  padding: 0px;
}

.use-area-boxRight .items4 .title {
  color: #483CFF;
  padding: 0 35px 0 0;
}

.use-area-boxRight .items4 .color {
  color: #b7b8be;
  margin-left: 10px;
}

.qrcode-wrapper-box {
  position: relative;
  cursor: pointer;
}

.qrcode-wrapper-box:hover .qrcode-wrapper {
  display: block;
}

.qrcode-wrapper-box .qrcode-wrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, calc(-100% - 14px), 0);
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 4px 14px rgb(0 0 0 / 10%);
}

.qrcode-wrapper-box .qrcode-wrapper img {
  width: 135px;
  padding: 0px;
}

.qrcode-wrapper-box .qrcode-wrapper::after {
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
}


@media screen and (max-width: 1200px) {
  .use-area-boxRight .items2 {
    font-size: 24px;
    text-align: center;
  }
  .use-area-boxRight .items3 {
    font-size: 14px;
    text-align: center;
  }
  .use-area-boxRight .items4 {
    font-size: 14px;
    text-align: center;
  }


  .nav-box .nav-box-logo {
    margin-left: 10px;
  }


  .use-area-box {
    width: 90%;
    margin: 0 auto;
  }

  .use-area-box-buttom:nth-child(1) .use-area-boxLeft {
    width: 100%;
    text-align: center;
  }

  .use-area-box-buttom:nth-child(1) .use-area-box-buttom img {
    width: 90%;
  }

  .use-area-box-buttom:nth-child(1) .use-area-boxRight {
    //text-align: center;
    width: 100%;
  }

  .use-area-box-buttom:nth-child(1) {
    flex-direction: column;
    align-items: center;
  }

  /*    s*/
  .use-area-box-buttom:nth-child(2) .use-area-boxLeft {
    width: 100%;
    //color: red;
    //text-align: center;
  }

  .use-area-box-buttom:nth-child(2) .use-area-box-buttom img {
    width: 90%;
  }

  .use-area-box-buttom:nth-child(2) .use-area-boxRight {
    //text-align: center;
    width: 100%;
  }

  .use-area-box-buttom:nth-child(2) {
    flex-direction: column;
    //height: 410px;
    position: relative;
    justify-content: end !important;

    margin: 195px 0 150px 0;
  }

  .use-area-box-buttom:nth-child(2) .use-area-boxLeft img {
    position: absolute;
    top: -105px;
    left: 50%;
    -webkit-transform: translateX(-50%);
  }

  /* 3 */
  .use-area-box-buttom:nth-child(3) .use-area-boxLeft {
    width: 100%;
    text-align: center;
  }

  .use-area-box-buttom:nth-child(3) .use-area-box-buttom img {
    width: 90%;
  }

  .use-area-box-buttom:nth-child(3) .use-area-boxRight {
    //text-align: center;
    width: 100%;
  }

  .use-area-box-buttom:nth-child(3) {
    flex-direction: column;
  }

}

/* 应用场景区域结束 */


/* 下拉展示区域开始 */
.appreciation-serve-content {
  height: 490px !important;
}

.appreciation-serve-content .xiala {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.appreciation-serve-content .xiala .xiala-img img {
  width: 90%;
}

.appreciation-serve-content .xiala .xiala-title {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  height: 100%;
}

.appreciation-serve-content .xiala .xiala-title li {
  display: flex;
}

.appreciation-serve-content .xiala .xiala-title li:hover {
  background: linear-gradient(128deg, #ECF0F3 0%, #F7F8FA 100%) linear-gradient(147deg, #40485D 0%, #606A82 100%);
  box-shadow: 4px 3px 19px 0px rgba(47, 110, 249, 0.16), -8px -8px 16px 0px #FAFBFC, 1px 1px 16px 0px #E9EAF2, -1px -1px 16px 0px #F5F6FA;
  border-radius: 4px;
  padding: 20px;
  box-sizing: border-box;
}

.appreciation-serve-content .xiala .xiala-title li img {
  width: 35px;
  height: 35px;
  margin-right: 15px;
}

.appreciation-serve-content .xiala .xiala-title li .place1 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #6a5bff;
}

.appreciation-serve-content .xiala .xiala-title li .place2 {
  font-size: 14px;

  font-weight: 500;
  color: #78797f;
}

/*下拉展示区域结束*/


</style>

<style lang="less">
@keyframes move4 {
  0% {

    opacity: 0;
    display: none;
    transform: translate3d(0px, 250px, 0px);
  }

  50% {

    opacity: 0.5;


  }

  90% {
    opacity: 1;
    display: block;
    transform: translate3d(0px, 0px, 0px);
  }
}
</style>
